<template>
  <el-dialog
    class="pick-dialog"
    title="绑定手机"
    append-to-body
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    width="1688px"
    top="30vh"
  >
    <div class="form-box" v-loading="loading">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        class="zdy-form search-form-new"
        label-width="100px"
        @keyup.enter.native="search"
      >
        <el-form-item label="手机号" prop="tel">
          <el-input
            v-model="queryParams.tel"
            placeholder="请输入手机号"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="编号" prop="num">
          <el-input
            v-model="queryParams.num"
            placeholder="请输入编号"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="发布人" prop="">
          <el-input
            v-model="queryParams.createName"
            placeholder="请输入发布人"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="search"
            class="zdy-btn"
            >搜索</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="openAdd"
            class="zdy-btn"
            >新增</el-button
          >
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData.records"
        highlight-current-row
        height="600px"
        style="width: 100%"
        @current-change="handleCurrentChange"
        @cell-dblclick="dbClick"
        :border="true"
      >
        <!-- <el-table-column prop="id" label="序号" width="80"></el-table-column> -->
        <el-table-column
          prop="type"
          label="类型"
          width="88"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          min-width="260"
          align="center"
        >
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              :content="scope.row.remark"
              placement="top-start"
            >
              <div class="zdy-des">{{ scope.row.remark }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="createName"
          label="发布人"
          width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="gameType"
          label="游戏类型"
          width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="num"
          label="手机编号"
          width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="tel"
          label="手机号"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="tengxunCount"
          label="腾讯剩余卡位"
          width="126"
        >
          <template #default="{ row }">
            <div style="color: #1890ff" v-if="row.gameType == '腾讯'">
              {{ row.tengxunCount }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="custodian"
          align="center"
          label="网易使用状态"
          width="100"
        >
          <template #default="{ row }">
            <div style="color: green" v-if="row.wyStatus == 1">未使用</div>
            <div style="color: blue" v-if="row.wyStatus == 2">已空闲</div>
            <div style="color: red" v-if="row.wyStatus == 3">使用中</div>
            <div style="color: orange" v-if="row.wyStatus == 4">已售未换绑</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="wyGoodsId"
          label="商品编号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="supplyChannel"
          label="出售渠道"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="nextTime"
          label="下次换绑时间"
          width="188"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="custodian"
          label="保管人"
          width="100"
          align="center"
        ></el-table-column>

        <!-- <el-table-column
          align="center"
          label="腾讯系列"
          width="126"
          prop="txCount"
        >
          <template #default="{ row }">
            <div
              style="color: #169bd5"
              @click="tanchuangceng(row.tengxunContent, '腾讯系列')"
            >
              {{ row.tengxunCount }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="网易系列"
          prop="mhyCount"
          width="126"
        >
          <template #default="{ row }">
            <div
              style="color: #169bd5"
              @click="tanchuangceng(row.wangyiContent, '网易系列')"
            >
              {{ row.wangyiCount }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="米哈游系列"
          prop="mhyCount"
          width="126"
        >
          <template #default="{ row }">
            <div
              style="color: #169bd5"
              @click="tanchuangceng(row.mihaContent, '米哈游系列')"
            >
              {{ row.mihaCount }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="其他系列"
          prop="qtCount"
          width="126"
        >
          <template #default="{ row }">
            <div
              style="color: #169bd5"
              @click="tanchuangceng(row.otherContent, '其他系列')"
            >
              {{ row.otherCount }}
            </div>
          </template>
        </el-table-column> -->
      </el-table>
      <!-- <div class="pages-box">
        <el-pagination
          @current-change="pageChange"
          :current-page="queryParams.pageNum"
          :page-sizes="[10, 20, 30, 40, 50, 60]"
          :page-size="queryParams.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="tableData.total"
        ></el-pagination>
      </div> -->
      <div class="center">
        <el-button @click="close('ruleForm')">取消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确认</el-button
        >
      </div>
    </div>
    <addDialog ref="addDialog" @add="getList"></addDialog>
    <!-- 系列弹窗 -->
    <el-dialog
      class="diologs"
      append-to-body
      :title="names"
      :visible.sync="dialogVisiblese"
      width="30%"
      center
      top="30vh"
    >
      <div
        style="
          height: 600px;
          display: flex;
          justify-content: start;
          overflow: auto;
        "
      >
        <div class="boxs">
          <div
            class="ones"
            v-for="(item, index) in xilie"
            :key="index"
            @click="getOnes(item.list, item.name)"
          >
            <div>{{ item.name }}({{ item.list.length }}个)</div>
          </div>
        </div>
        <div class="two" style="">
          <div class="twos" style="color: #1abc9c">
            {{ nameyouxi + " - 账号信息" }}
          </div>
          <div class="twos" v-for="(item1, index1) in listOne" :key="index1">
            {{ item1 }}
          </div>
        </div>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import phoneApi from '@/api/phoneManage';
import addDialog from '../../phoneManage/components/add'
export default {
  name: "selectPhone",
  components: { addDialog },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      gameTypes: [
        '手机', '手机卡'
      ],
      tableData: {
        records: [],
        total: 0
      },
      queryParams: {
        // pageNum: 1,
        // pageSize: 10,
        tel: null,
        num: null,
        createName: null,
        status: 1
        // gameType: null,
        // wyStatus: null,
      },
      currentRow: null,
      dialogVisiblese: false,
      listOne: [],
      nameyouxi: "",
      names: "",
      xilie: [],
      gameType: [
        { name: '腾讯', id: 1 },
        { name: '网易', id: 2 },
        { name: '米哈游', id: 3 },
        { name: '其他', id: 4 }
      ],
      gameStatus: [
        { name: '未使用', id: 1 },
        { name: '已空闲', id: 2 },
        { name: '使用中', id: 3 },
        { name: '已售未换绑', id: 4 }
      ],
    };
  },
  created() { },
  methods: {
    getOnes(list, i) {
      console.log(list, i);
      this.listOne = list;
      this.nameyouxi = i;
    },
    //系列弹层
    tanchuangceng(row, i) {
      console.log(111);
      if (row.length == 0) {
        this.dialogVisiblese = false;
        this.$message({
          message: "暂无系列！",
          type: "warning",
        });
        return;
      }
      this.dialogVisiblese = true;
      console.log(row);
      this.xilie = row;
      this.names = i;
      this.listOne = row[0].list;
      this.nameyouxi = row[0].name;
    },
    open(gameId) {
      console.log('3333333', gameId);
      this.queryParams.tel = null
      this.queryParams.num = null
      this.queryParams.createName = null
      this.queryParams.status = 1
      this.queryParams.game = gameId
      this.dialogVisible = true;
      this.getList()
    },
    // 打开新增弹窗
    openAdd() {
      this.$refs.addDialog.open()
    },
    // 获取列表
    getList() {
      this.loading = true;
      phoneApi.getList(this.queryParams).then(response => {
        let arr = response.rows.filter(item => item.isTrue == true)
        console.log('333', arr);
        this.tableData.records = arr;
        this.tableData.total = response.total;
        this.loading = false;
      });
    },
    // 页码改变
    pageChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    // 搜索
    search() {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.getList();
    },
    // 双击直接选择
    dbClick(row) {
      if (row.isTrue == false) {
        return this.$message.warning('当前手机卡绑定已满')
      }
      this.currentRow = row
      this.submitForm()
    },
    // 选择项改变
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    submitForm() {
      if (!this.currentRow) {
        return this.$alert("请选择一条记录！");
      }
      this.$emit('change', this.currentRow)
      this.close()
    },
    close() {
      this.tableData.records = []
      this.dialogVisible = false;
    }
  }
};
</script>
<style scoped lang="css">
.ones {
  width: 166px;
  height: 42px;
  text-align: center;
  line-height: 42px;
  border: 1px solid #ccc;
}

.two {
  text-align: center;
  width: 300px;
}

.twos {
  width: 100%;
  padding: 11.7px 20px;
  border: 1px solid #ccc;
}
.center {
  text-align: center;
}

.pick-dialog >>> .el-dialog {
  margin-top: 100px !important;
}

.form-box {
  width: 100%;
}

::v-deep .el-input-number.is-without-controls .el-input__inner {
  text-align: left;
}
</style>
